<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="user" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="phone"/>
			</view>
			<view class="item">
				<view class="left">所在地区</view>
				<input type="text" placeholder-class="line" disabled="true" placeholder="请填写所在地区" @click="show = true" v-model="addressInput" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="address" />
			</view>
		</view>
		<u-popup :show="show" @close="close" >
			<van-area :area-list="areaList" @confirm="config" @bind="cancel" />
		</u-popup>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<switch color="red" @change="setDefault" v-model="setDef"/>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button type="primary" text="确定" shape="circle" @click="ready"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		areaList
	} from 'wxcomponents/area-data';

	export default {
		data() {
			return {
				show: false,
				areaList,
				addressInput:'', //地区输入框数据	
				province:'',			//省市
				city:'',		//城市
				county:'',		//城区
				user:'',			
				phone:'',
				address:'',
				setDef:false,
				id:''//修改地址id
			};
		},
		methods: {
			setDefault() {
				this.setDef= !this.setDef
				// console.log(this.setDef)
			},
			close() {
				this.show = false
				// console.log('close');
			},
			config(e){
				this.province=e.detail.values[0].name
				this.city=e.detail.values[1].name
				this.county=e.detail.values[2].name
				this.addressInput=this.province+this.city+this.county
				this.show = false
			},
			ready(){
				if(this.user==''||this.phone==''||this.address==''||this.addressInput==''){
					uni.showToast({
						title: '输入框不能为空',
						icon: 'none',
						duration: 2000
					});
				}else{
					this.$post(this.API.save,{
						name:this.user,
						tel:this.phone,
						province:this.province,
						city:this.city,
						county:this.county,
						addressDetail:this.address,
						isDefault:this.setDef,
						id:this.id
					}).then(res=>{
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								duration: 2000
							});
							})
						}
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
			},
			
			
			getaddress(list){  //获取修改地址的对象
			var getlist=JSON.parse(list)
			this.user=getlist.name
			this.phone=getlist.tel
			this.province=getlist.province
			this.city=getlist.city
			this.county=getlist.county
			this.addressInput=getlist.province+getlist.city+getlist.county
			this.address=getlist.addressDetail
			this.setDef=getlist.isDefault
			this.id=getlist.id

			}
			
		},
		onLoad(options) {
			if(options.list!==undefined){
				this.getaddress(options.list)
			}
	
			
		}
		
	}
	
</script>

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.showadd {
		background-color: pink;
		width: 100rpx;
		height: 50rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					display: 1;
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			.default {
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
		.footer{
			margin-top: 100rpx;
		}
	}
</style>
